<template>
    <Menu style="width: 200px" theme="light" @on-select="onSelect" @on-open-change="onOpenChange" accordion>
        <!--<Submenu name="1">-->
            <!--<template slot="title">-->
                <!--<Icon type="ios-paper" />-->
                <!--Mysql-->
            <!--</template>-->
            <!--<template v-for="mysql in mysqlList">-->
                <!--<MenuItem :name=mysql.id>{{mysql.name}}</MenuItem>-->
            <!--</template>-->
        <!--</Submenu>-->
        <Submenu name="mysql">
            <template slot="title">
                <Icon type="ios-paper" />
                Mysql
            </template>
            <template v-for="mysql in mysqlList">
                <Submenu :name=mysql.id>
                    <template slot="title">{{mysql.name}}</template>
                    <template v-for="tableName in tableList">
                        <MenuItem :name=tableName>{{tableName}}</MenuItem>
                    </template>
                </Submenu>
            </template>
        </Submenu>
    </Menu>
</template>

<script>
    var uuid = require('uuid');
    import {getDatabaseConfig} from '../../assets/databaseConfig'
    import {createMysqlConnection} from '../../assets/mysqlConnect'

    var connection;

    export default {
        name: "gnerv-sider",
        data () {
            return {
                listDatabase: [],
                mysqlList:[],
                tableList:[]
            }
        },
        methods: {
            initSiderList () {
                let databaseConfig = getDatabaseConfig();
                let parse = JSON.parse(databaseConfig);
                this.listDatabase = parse;
                for (var i = 0; i < this.listDatabase.length; i++)
                {
                    this.mysqlList.push(this.listDatabase[i])
                }
            },
            onSelect: function(name) {
                var _this = this;
                _this.$router.push(`/gnervcat/all/${name}`);
            },
            onOpenChange: function (name) {
                console.log("name----" + name.length)
                this.initTableList();
            },
            initTableList () {
                let databaseConfig = getDatabaseConfig();
                let parse = JSON.parse(databaseConfig);
                this.listDatabase = parse;
                this.runSql();
            },
            runSql() {
                var _this = this;
                console.log(_this.listDatabase[_this.databaseId]);
                connection = createMysqlConnection(_this.listDatabase[0]);
                connection.connect();
                var sql ="show databases";
                connection.query(sql, function (err, result) {
                    if (err) {
                        console.log(err);
                        return;
                    }
                    if(result.length > 0) {
                        _this.tableColumns = [];
                        let j = {};
                        j.type = 'selection';
                        j.width = 50;
                        j.align = 'center';
                        _this.tableColumns.push(j);
                        for (var i = 0; i < 1; i++) {
                            let keys = Object.keys(result[i]);
                            for (let key of keys) {
                                let j = {};
                                j.title = key;
                                j.key = key;
                                console.log("key===" + key)
                                _this.tableColumns.push(j);
                            }
                        }
                        _this.tableData = [];
                        _this.tableList = [];
                        for (let obj of result) {
                            _this.tableData.push(obj);
                            _this.tableList.push(obj.Database)
                        }
                    }
                });
                connection.end();
            }
        },
        created : function() {
            this.initSiderList();
            console.log(uuid.v1())
        }
    }
</script>

<style scoped>

</style>